<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>登陆界面</title>

    <!-- CSS -->
    <link rel="stylesheet" href="../static/plugins/layui/css/layui.css" th:href="@{static/plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" href="../static/mycss/common.css" th:href="@{static/mycss/common.css}"/>

</head>
<body style="background-image: url('static/images/login/login.jpg')">

<div class="loginBox">
    <form class="layui-form" >
        <div class="layui-form-item">
            <h2 style="padding-left: 40%;color: #eeeeee"><span th:text="${sysName}"></span></h2>
        </div>
        <div class="layui-form-item input-item">
                <label for="name">用户名</label>
                <input type="text" class="layui-input" name="name" id="name" lay-verify="required" placeholder="请输入用户名" autocomplete="off"/>
        </div>
        <div class="layui-form-item input-item">
                <label for="password">密码</label>
                <input type="password" class="layui-input" name="password" id="password" lay-verify="required" placeholder="请输入密码" autocomplete="off"/>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" class="layui-input" lay-verify="false" id="incode" placeholder="验证码" autocomplete="off"/>
            </div>
            <div class="layui-input-inline" style="width: 90px">
                <span class="layui-input" style="width: 99px" id="discode" onclick="getIdentifyCode();"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="text-align: left">记住密码</label>
            <div class="layui-input-block">
                <input type="checkbox" id="remPassword" lay-skin="switch" lay-text="是|否" lay-filter="remPassword">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="text-align: left">验证码</label>
            <div class="layui-input-block">
                <input type="checkbox" id="identifyCode" lay-skin="switch" lay-text="开|关" lay-filter="identifyCode" disabled>
            </div>
        </div>
        <div class="layui-form-item ">
            <button type="button" class="layui-btn btn-submit" style="width: 142px" lay-submit="" lay-filter="goLogin" id="doLoginBtn">登录</button>
            <button type="button" class="layui-btn layui-bg-red" style="width: 142px" id="doRegister">注册</button>
        </div>
    </form>
</div>

<!-- JS -->
<script type="text/javascript" src="../static/plugins/layui/layui.js" th:src="@{static/plugins/layui/layui.js}"></script>
<script language="JavaScript">
    /**
     * 当session过期，打开tab页签时直接返回到登录页，而不是在tab页签里面打开登录页
     */
    if (window != top) {
        top.location.href = location.href;
    }

    /**
     * 禁用浏览器后退键
     */
    if (window.history && window.history.pushState) {
        $(window).on('popstate', function () {
            window.history.pushState('forward', null, '');
            window.history.forward(1);
        });
    }
    window.history.pushState('forward', null, '');
    window.history.forward(1);

    /**
     * Enter 键绑定 登录按钮
     * @param e
     */
    document.onkeydown = function (e) {
        if ($(".bac").length == 0) {
            if (!e) e = window.event;
            if ((e.keyCode || e.which) == 13) {
                var obtnLogin = document.getElementById("doLoginBtn")
                obtnLogin.focus();
            }
        }
    }
</script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['form', 'layer'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;

        getIdentifyCode();//获取验证码

        var identifyCodeFlag = [[${codeFlag}]];//是否需要输入验证码标志， 1是  0否
        if(identifyCodeFlag === 1){
            $('#identifyCode').attr("checked", "checked");
            form ? form.render("checkbox") : null;
        }

        var passwordFlag = 0;//是否记住密码标志， 1记住  0不记住
        $("#name").on({
            'blur': function () { //失焦事件
                if(localStorage.getItem(this.value) != null){
                    $('#password').val(localStorage.getItem(this.value));
                    $('#remPassword').attr("checked", "checked");
                    form ? form.render("checkbox") : null;
                    passwordFlag = 1
                }else {
                    passwordFlag = 0
                }
            }
        });

        /**
         * 监听 开关
         */
        form.on('switch(remPassword)', function(data){
            if(this.checked){
                passwordFlag = 1;
            }else{
                passwordFlag = 0;
            }
        });

        /**
         * 表单提交
         */
        form.on('submit(goLogin)', function (data) {
            if(identifyCodeFlag === 1){
                if(!$('#incode').val() || $('#incode').val() != $('#discode').text()){
                    layer.msg('请输入正确的验证码', {icon: 5, time: 1000});
                    return false;
                }else{
                    $.ajax({
                        url:'login/loginIn',
                        type: 'post',
                        dataType:'json',
                        data:{subInfo:JSON.stringify(data.field)},
                        success: function(data) {
                            if(data.code === 0){

                                if(window.sessionStorage){
                                    if(passwordFlag === 1){
                                        localStorage.setItem($('#name').val(),$('#password').val());//本地记住密码
                                    }else{
                                        localStorage.removeItem($('#name').val());
                                    }

                                    //会话级别的本地存储
                                    sessionStorage.setItem("userInfo",JSON.stringify(data.data));
                                    window.location.href = 'toMain';//跳转到主页
                                }else{
                                    layer.msg('浏览器不支持localStorage,请使用推荐浏览器（谷歌浏览器）',{icon:5,time:1000});
                                }
                            }else{
                                layer.msg("用户名或密码错误",{icon:5,time:1000});
                            }
                        }
                    });
                }
            }else{
                $.ajax({
                    url:'login/loginIn',
                    type: 'post',
                    dataType:'json',
                    data:{subInfo:JSON.stringify(data.field)},
                    success: function(data) {
                        if(data.code=== 0){
                            if(window.sessionStorage){
                                /**
                                 * 将密码信息放入localStorage
                                 */
                                if(passwordFlag === 1){
                                    localStorage.setItem($('#name').val(),$('#password').val());//本地记住密码
                                }else{
                                    localStorage.removeItem($('#name').val());
                                }

                                /**
                                 * sessionStorage
                                 */
                                sessionStorage.setItem("userInfo",JSON.stringify(data.data));
                                window.location.href = 'toMain';//跳转到主页
                            }else{
                                layer.msg('浏览器不支持localStorage,请使用推荐浏览器（谷歌浏览器）',{icon:5,time:1000});
                            }
                        }else{
                            layer.msg("用户名或密码错误",{icon:5,time:1000});
                        }
                    }
                });
            }
            return false;
        });

        /**
         * 注册
         */
        $('#doRegister').click(function(){
            layer.msg("敬请期待。。。",{icon:1,time:1000});
        });

        /**
         * 表单输入框效果 （依赖 common.css样式）
         */
        $(".input-item").click(function(e){
            e.stopPropagation();
            $(this).addClass("layui-input-focus").find(".layui-input").focus();
        })
        $(".input-item .layui-input").focus(function(){
            $(this).parent().addClass("layui-input-focus");
        })
        $(".input-item .layui-input").blur(function(){
            $(this).parent().removeClass("layui-input-focus");
            if($(this).val() != ''){
                $(this).parent().addClass("layui-input-active");
            }else{
                $(this).parent().removeClass("layui-input-active");
            }
        });


    });

    /**
     * 生成验证码
     */
    var code;
    function getIdentifyCode() {
        code = "";
        var codeLength = 4;//设置验证码的长度
        var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k',
                'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');//所有候选组成验证码的字符，当然也可以用中文的
        /*<![CDATA[*/
        for (var i = 0; i < codeLength; i++) {
            var charIndex = Math.floor(Math.random() * 36);
            code += selectChar[charIndex];
        }
        /*]]>*/
        // 设置验证码的显示样式，并显示
        document.getElementById("discode").style.fontFamily = "Fixedsys";  //设置字体样式
        document.getElementById("discode").style.fontSize = "30px";  //设置字体大小
        document.getElementById("discode").style.letterSpacing = "6px";  //字体间距
        document.getElementById("discode").style.color = "#000000";   //字体颜色
        document.getElementById("discode").innerHTML = code;      // 显示
    }

</script>
</body>
</html>